<template>
	<section id="payment">
		<mt-header fixed title="购彩列表">
			<router-link to="/playGame" slot="left">
			    <mt-button icon="back">返回</mt-button>
			</router-link>
		</mt-header>
		<div class="scroll-content has-header">
			<div class="top">
				<el-button type="info" size="mini" @click="add_list">再选一注</el-button>
				<el-button type="info" size="mini" @click="clear_list">清空列表</el-button>
			</div>
			<ul class="list">
				<li class="item" v-for="(item, index) in list">
					<div class="left">
						<p>号码：{{item.haoma}}</p>
						<p>{{item.beishu}}倍模式</p>
						<p>定位胆，{{item.zhushu}}注{{item.allMoney}}元</p>
					</div>
					<div class="right">
						<el-button type="danger" size="mini" @click="delete_list(index)">X</el-button>
					</div>
				</li>
			</ul>
		</div>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="80%" center>
    		<p style="text-align: center;">您确定进行投注？</p>
    		<span slot="footer" class="dialog-footer">
    			<el-button type="info" @click="centerDialogVisible = false">取 消</el-button>
    			<el-button type="danger">确定</el-button>
  			</span>
    	</el-dialog>
    	<el-dialog title="提示" :visible.sync="centerDialogVisible2" width="80%" center>
    		<p style="text-align: center;">您的余额不足请充值！</p>
    		<span slot="footer" class="dialog-footer">
    			<el-button type="info" @click="centerDialogVisible2 = false">取 消</el-button>
    			<el-button type="danger" @click="recharge">充值</el-button>
  			</span>
    	</el-dialog>
    	<div class="footer">
			<div @click='lottery'>
				<el-button type="info" size="mini">开奖公告</el-button>
			</div>
			<p>{{nowZhushu}} 注&nbsp&nbsp&nbsp{{nowMoney}} 元</p>
			<div @click="confirm_addNum">
				<el-button type="danger" size="mini" @click='confirm_addNum'>确认投注</el-button>
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data () {
			return {
				centerDialogVisible: false,
				centerDialogVisible2:false
			}
		},
		created () {
//			let localList = JSON.parse(window.localStorage.getItem("payment"))
//			if(localList) {
//				this.$store.commit("payment", localList)
//			}
		},
		methods: {
			recharge () {
				// 跳转到充值页面
				console.log("去充值")
			},
			lottery () {
				// 跳转到开奖公告
				console.log("查看公告")
			},
			confirm_addNum () {
				// 确认投注
				this.centerDialogVisible = true
			},
			add_list () {
				// 再添一注
				this.$router.push("/playGame")
			},
			delete_list (index) {
				// 删除当前注
				let deleteList = this.$store.state.payment
				deleteList.splice(index, 1)
				this.$store.commit("payment", deleteList)
			},
			clear_list () {
				// 删除所有注
				this.$store.commit("payment", [])
			}
		},
		computed: {
			list () {
				return this.$store.state.payment
			},
			nowZhushu () {
				let arrList = this.list
				var sum = 0
				arrList.forEach(item => {
					sum += item.zhushu
				})
				return sum
			},
			nowMoney () {
				let arrList = this.list
				var sum = 0
				arrList.forEach(item => {
					sum += item.allMoney
				})
				return sum
			}
		},
		components: {
			
		}
	}
</script>

<style lang="less" scoped>
	#payment {
		width: 100%;
		.mint-header {
			background-color: #ec2829;
			font-size: 16px;
		}
		.scroll-content {
			padding-bottom: 4rem;
		}
		.top {
			width: 100%;
			padding: 1rem 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.list {
			width: 100%;
			.item {
				width: 90%;
				margin:0 auto 1rem;
				padding: 1rem;
				border: 1px solid #ccc;
				border-radius: 1rem;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.left {
					width: 70%;
					p {
						padding-left: 2rem;
						text-align: left;
						line-height: 2.4rem;
					}
				}
				.right {
					width: 20%;
				}
			}
		}
		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rem;
			background-color: #000;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.clearLeft, .addRight {
				display: block;
				height: 2rem;
				width: 20%;
				padding: 0 1rem;
			} 
			p {
				display: inline-block;
			}
			button {
				padding: 8px 5px;
			}
		}
	}
</style>
